<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color:#89BF4F;
			margin: 0px auto;
			border-radius: 100%;
			text-align: center;
			font-size: 18px;
		}
	</style>
	<script type="text/javascript">
		// var city = ["广州","北京","上海","深圳"];
		// var diqu=['福田','龙岗','罗湖'];
		// // 把diqu数组插入city数组形成二维数组
		// city[3]=diqu
		// // 把北京替换成罗湖
		// var temp;
		// temp=city[1]
		// city[1]=city[3][2]
		// city[3][2]=temp
		// console.log(city)
		// document.write(city+"<br>")
		// document.write(diqu)


			// var arr=[2,43,56,21,78,7,9,35,8,13];
			// var temp=0;
			// // for(var i=0;i<arr.length;i++){
					
			// // 		temp+=arr[i]	
			// // }
			// // document.write("数组和："+temp+"<br>")

			// for(var i in arr){
			// 	temp+=arr[i]
			// }
			// document.write("数组之和："+temp+"<br>")

			// // 字符串反转
			// var str="Hello world!";
			// var temp="";
			// for(var i=(str.length)-1;i>=0;i--){
			// 	temp=temp+str[i];
			// }
			// document.write(temp)

			// 定时器
			// var i=10;
			// var num=0;
			// window.onload= function timer(){
			// 	setInterval(run,1000)
			// }

			// function run(){
			// 	pp=document.getElementById('pp')
			// 	if(i>=10){
			// 		num=0;
		
			// 	}
			// 	else if(i<=0){
			// 		num=1
					
			// 	}
			// 	if(num==0){
			// 		pp.innerHTML=i
			// 		i--;
			// 	}
			// 	else if(num==1){
			// 		pp.innerHTML=i
			// 		i++;
			// 	}
				
			// }


			// 点击盒子变大

			var num=0;

			function bian(){
				box=document.getElementById('box')
				boxwidth=parseInt(window.getComputedStyle ? window.getComputedStyle(box,null).width : box.currentStyle.width);
				boxHeight = parseInt(window.getComputedStyle ? window.getComputedStyle(box,null).height : box.currentStyle.height);
				if(boxwidth>=400){
					num=0;
				}
				else if (boxwidth<=200){
					num=1;
				}
				if(num==0){
					newboxwidth=boxwidth-200;
					newboxHeight=boxHeight-200;
					box.innerHTML="变小";
					box.style.lineHeight=200+'px';
				}
				else if(num==1){
					newboxwidth=boxwidth+200;
					newboxHeight=boxHeight+200;
					box.innerHTML="变大";
					box.style.lineHeight=400+'px';
				}

				box.style.width=newboxwidth+'px';
				box.style.height=newboxHeight+'px';
			}

	</script>
</head>
<body> 
	<p id="pp"></p>
	<div class="box" id="box" onmouseover="bian()" onmouseout="bian()"></div>
</body>
</html>